<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jq/jquery-1.7.1.js"></script>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		.wrap {
			width: 330px;
			margin: 100px auto;
			/*border: solid 1px red;*/
		}
		
		.wrap a {
			display: block;
			height: 30px;
			width: 100px;
			text-decoration: none;
			line-height: 30px;
			color: #000;
			text-align: center;
		}
		
		li {
			list-style: none;
			background-color: deeppink;
		}
		
		.wrap>ul>li {
			float: left;
			margin-right: 10px;
			background-color: blue;
			position: relative;
		}
		
		.wrap li ul {
			position: absolute;
			top: 30px;
			display: none;
		}
	</style>
	<script type="text/javascript">
		$(function() {
			//获取所有wrap下的ul子元素li
			$(".wrap>ul>li").mouseenter(function() {
				//获取该元素下的ul
				$(this).children("ul").slideDown(500);
			});
			$(".wrap>ul>li").mouseout(function() {
				//获取该元素下的ul
				$(this).children("ul").slideUp(500);
			});

		});
	</script>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="javascript:">一级菜单</a>
					<ul>
						<li>
							<a href="javascript:">1-1</a>
						</li>
						<li>
							<a href="javascript:">1-2</a>
						</li>
						<li>
							<a href="javascript:">1-3</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:">二级菜单</a>
					<ul>
						<li>
							<a href="javascript:">2-1</a>
						</li>
						<li>
							<a href="javascript:">2-2</a>
						</li>
						<li>
							<a href="javascript:">2-3</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:">三级菜单</a>
					<ul>
						<li>
							<a href="javascript:">3-1</a>
						</li>
						<li>
							<a href="javascript:">3-2</a>
						</li>
						<li>
							<a href="javascript:">3-3</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>

</html>